<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<style type="text/css">
	.container-box{
		height: 100vh;
	}
	.semanticui-headerbox{
		position: relative;
		height: 10%;
		background-color: #666;
	}
	.leftbox,.rightbox{
		float: left;
		width: 50%;
		height: 90%;
	}
	.leftbox{
		background-color: #888;
	}
	.rightbox{
		background-color: #999;
	}
</style>



<div class="container-box">
	<div class="semanticui-headerbox">
		<!--嵌入semanticui框架的导航栏组件-->
		<!-- 框架的组件文档 "https://zijieke.com/semantic-ui/collections/menu.php" -->
		<div class="ui secondary menu" style="min-height: 100%">
			<a class="item active">
				主页
			</a>
			<a class="item">
				信息
			</a>
			<a class="item">
				朋友
			</a>
			<div class="right menu">
				<div class="item">
					<div class="ui icon input">
						<input type="text" placeholder="搜索...">
						<i class="search link icon"></i>
					</div>
				</div>
				<a class="ui item">
					退出
				</a>
			</div>
		</div>
		<!--semanticui框架的导航栏组件结束-->
	</div>


	<!-- 左侧区域描述 -->
	<div class="leftbox">
		

	</div>


	<!-- 右侧区域描述 -->
	<div class="rightbox">
		
		
	</div>
</div>

<script type="text/javascript">
	//获取navitem项
	var navitem=$('.menu .item');
	//为item执行点击事件
	navitem.click(function(){
		console.log($(this).index());
		//利用addClass()、removeClass()来控制当前点击项的样式。
		//siblings()可获取当前点击项的其他兄弟元素
		//$(this).addClass('active')
		//$(this).siblings().removeClass('active');
	});
</script>